<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 组件之子组件发射事件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <add-button a="3" b="8" @add_event="getResult">自定义加法组件</add-button>
    </div>

</body>
<script>
    Vue.component('add-button', {
        props: ['a', 'b'],
        template: '<button @click="add">自定义加法组件</button>',
        methods: {
            'add': function () {
                this.$emit('add_event', {
                    result: this.a + this.b
                })
            }
        }
    })
    var app = new Vue({
        el: "#app",
        methods: {
            getResult: function (val) {
                console.log(val.result)
            }
        }
    })
</script>

</html>
